<template>
	<div>
		<div class="header">
			<div class="header-left">
				<span class="label">总数:<span>10</span></span>
				<el-button type="primary" size="mini" @click="pagePlay(pageNum - 1)">上一页</el-button>
				<el-button type="primary" size="mini" @click="pagePlay(pageNum + 1)">下一页</el-button>
				<!--<span class="label">设备编码: <span>{{ playDevice != null ? playDevice.id : '' }}</span></span>-->
				<span class="label">设备编码: <span>{{ toPlayDevice != null ? toPlayDevice.id : '' }}</span></span>
				
			</div>
			<div class="header-right">
				<div>
					<span>分屏</span>
					<span class="spilt" @click="spiltScreen(1)">1</span>
					<span class="spilt" @click="spiltScreen(4)">4</span>
					<span class="spilt" @click="spiltScreen(9)">9</span>
					<span class="spilt" @click="spiltScreen(16)">16</span>
					<span class="spilt" @click="fullScreen">全屏</span>
				</div>
				<div>
					<i class="el-icon-close close" @click="closeAll"></i>
				</div>

			</div>
		</div>
		<play-window :rectSize="rectSize" ref="playWindow"></play-window>
		
	</div>
</template>
<style scoped>
.close {
	font-size: 22px;
	color: red;

	&:hover {
		cursor: pointer;
	}
	position: relative;  
	z-index: 3;
}


.header {
	border: 1px solid rgb(64, 158, 255);
	height: 40px;
	display: flex;
	align-items: center;
	/* 使子项在主轴上均匀分布，第一个在左侧，最后一个在右侧 */
	justify-content: space-between;


	.header-left {

		padding-right: 10px;

		.label {
			margin-left: 10px;
			margin-right: 10px;
			font-size: 12px;

			span {
				color: red;
			}
		}

		.select {
			margin-left: 10px;
		}


	}

	.header-right {
		padding-right: 30px;

		div {
			float: left;
		}

		span {
			padding-right: 10px;
		}

		.spilt {
			color: #1890ff;

			&:hover {
				cursor: pointer;
			}

		}
	}
}

</style>

<script>
import { mapState } from 'vuex';
import playWindow from '@/components/vplat/PlayWindow/playWindow';


export default {
	name: "PlayPanel",
	components: {
		playWindow
	},
	dicts: [],
	data() {
		return {
			pageNum: 1,
			//初始化播放窗口数量
			rectSize: 4
		};
	},
	mounted() {
		
	},
	computed: {//每次渲染都会触发
		...mapState({
			//引入模块化变量
			toPlayDevice: state => state.video.playDevice,//新增播放的设备

		}),
	},
	watch: {
		//监听模块化变量变化 
		toPlayDevice(device) {//监听新增播放的设备
			if (device) {
				
			}
		},
	},
	beforeDestroy() {
		
	},
	methods: {
		//关闭所有播放窗口
		closeAll() {
			this.$refs.playWindow.closeAll(); 
		},
		//分页播放
		pagePlay(list) {
			console.log(list);
		},
		//切换分屏数量
		spiltScreen(newSize) {
			this.rectSize = newSize;
			this.$refs.playWindow.spiltScreen(newSize); 
		},
		//全屏
		fullScreen() {
			 this.$refs.playWindow.fullScreen(); 
		},
	}
};
</script>

